<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: #000;
            
        }
        a:hover {
            color: pink;
        }
        .nav a {
            font-weight: 700;
        }
        .app {
            text-align: center;
            font-size: 14px;
        } 

        .nav ul  li {
            padding:  0 5px;
            list-style: none;
            float: left;
            left: 50px;
            
        }
        .search {
            height: 50px;
        }
        .search input {
            width: 400px;
            height: 20px;
            margin: 0 auto;
        }  
        .footer {
           margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="head">
            <div class="logo"><a href="#"><img src="./bdlogo.gif" alt=""></a></div>
        </div>
        <div class="bd">
            <div class="nav">
                <a href="#">新 闻</a>
                <a href="#">网 页</a>
                <a href="#">贴 吧</a>
                <a href="#">知 道</a>
                <a href="#">音 乐</a>
            </div>
            <div class="search">
                <input type="text" value="请输入">
                <button>提交</button>
            </div>
            <!-- footer区域 -->
            <div class="footer">
                <div class="links">
                    <a href="#">加入百度推广 </a><span> | </span>
                    <a href="#"> 搜索风云榜  </a><span> | </span>
                    <a href="#">关于百度 </a><span> | </span>
                    <a href="#">About Baidu</a><span> | </span>
                
                </div>
                <span>使用百度前必读 京ICP证030173号</span> 
            </div>
        </div>
        
    </div>
</body>

</html>